<template>
  <a-drawer class="a-drawer"
      :visible.sync="drawer"
      :direction="direction"
      :with-header="true"
      :width='size'
      @close="close">
    <header class="drawer-header">
      <!-- <a-button class="el-button" type="primary" icon="left" @click="close"></a-button> -->
      <p class="header__title">{{title}}</p>
    </header>
    <main class="drawer-main">
      <slot></slot>
    </main>
    <!-- <footer class="drawer-footer">
      <a-button class="handleConfirm" v-if="withYesButton" type="primary"  @click="handleConfirm">{{yesbutton}}</a-button>
      <a-button v-if="withNoButton" @click="handleClose">{{nobutton}}</a-button>
    </footer> -->
  </a-drawer>
</template>

<script>
  export default {
    name: "Drawer",
    props: {
      size: {
        type: String,
        default: '60%'
      },
      withYesButton: {
        default: true
      },
      withNoButton: {
        default: true
      },
      yesbutton: {
        type: String,
        default: '确认'
      },
      nobutton: {
        type: String,
        default: '取消'
      },
      // 关闭处理函数，存在此项时需手动关闭
      closeHandler: {
        type: Function
      }
    },
    data () {
      return {
        title: '',
        drawer: false,
        direction: 'rtl'
      }
    },
    methods: {
      // 新建编辑抽屉
      open (title) {
        this.title = title
        this.drawer = true
      },
      // 关闭
      close () {
        this.drawer = false
        this.$emit('close')
      },
      // 关闭窗口
      handleClose () {
        if (this.closeHandler != null) {
          this.closeHandler()
          return
        }
        this.close()
      },
      // 点击确认
      handleConfirm () {
        // this.$emit('confirm')
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .ant-drawer-body {
    padding: 0;
  }
  /deep/ .ant-drawer-close {
    position: absolute;
    top: -4;
    font-size: 20px;
  }
  .a-drawer{
    .drawer-header{
      border-bottom: 1px solid #eee;
      flex-shrink: 0;
      font-size: 20px;
      margin: 0;
      padding: 0;
      display: flex;
      position: relative;
      .header__title {
        padding-left: 10px;
        line-height: 40px;
        margin-left: 10px;
      }
      .el-button{
        width: 30px;
        border: 0;
        height: 45px;
        border-radius: 0;
        color: #ffffff;
      }
      .el-icon-close {
        position: absolute;
        top: 16px;
        right: 10px;
        font-size: 18px;
        &:hover {
          color: deepskyblue;
        }
      }
    }
    .el-drawer__body {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .drawer-header{
      height: 45px;
      line-height: 12px;
    }
    .drawer-main{
      padding: 12px 16px;
      height: 100%;
      overflow-y: auto;
    }
    .drawer-footer{
      height: 60px;
      flex-shrink: 0;
      border-top: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      .handleConfirm {
        margin-right: 20px;
      }
    }
    .el-drawer__close-btn {
      outline: none;
    }
  }
</style>
